<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery.min.js"></script>
    <title>Document</title>
    <style>
        .info{
            display: none;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <form action="http">
        <input id="wd" type="text" name="wd"/>
        <button></button>
        <select id="sf">
            <option value="1">湖南省</option>
            <option value="2">广东省</option>
            <option value="3">江西省</option>
        </select>
        <select id="cs class="s">
    
        </select>
        <div class="cls" onscroll="sl()" style="width:70px;height:1200px;overflow-x:auto;overflow-y:auto">
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！
            菜鸟教程 -- 学的不仅是技术，更是梦想！！！
            </div>
    </form>
    <ul>
        <li>
   <h3>刘佳鹏</h3>
        <div class="info">
       150
       140
    </div>
</li>
    <li>
        <h3>刘佳朋</h3>
        <div class="info">
            150
            140
         </div>
    </li>
    <li>
        <h3>刘佳彭</h3>
        <div class="info">
            150
            140
         </div>
    </li>
</ul>
<div class="box"></div>
    
</body>
<script>
    function sl(){
    var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
　　　　alert("到底了");
　　}
    //     alert("滚动条");
    //  var s=$(".sl").val();
    //  alert(s);
    //  if(s==0){
    //      $(".s").
    // }
}
$(function(){  
    
    var data = new Array;
        data[1] = ["湘潭","长沙","株洲"];
        data[2] = ["南昌","九江","宜春","鹰潭"];
        data[3] = ["武汉","宜昌","黄冈"];
        var sf = document.getElementById("sf");
        var cs = document.getElementById("cs"); 
    $("select").change(function(){
        var x = this.value;
        cs.length = 0;
        if(sf !=""){
            for(var i = 0;i<data[x].length;i++){
                cs.add(new Option(data[x][i],i));
            }
        }
    })
$(window).scroll(function(){
    // alert("你滚动");
    var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight == scrollHeight){
// 　　　　alert("已经到最底部了！");
        $("form").append("<h3>sb</h3>");
　　}
})


    // $("form").submit(function(e){
    //     var v=$("#wd").val();
    //     if(v==""&&v=="tmd"){
    //     e.preventDefault();
    //     }
    // })
    // $(".cls").scroll(function(){  
    //     // var v=$("#wd").val();
    //     // if(v==""&&v=="tmd"){
    //     // e.preventDefault();
    //     // }
    // })
    
    // $("h3").mouseover(function(){
    // //    var name=$(this).text();
    //     // $(".info").hide();
    //     $(this).next().show();
    //     // $(this).show();
    // })
    // $("h3").mouseout(function(){
    //     $(".info").hide();
    // }) 
    // var x=0,y=0;
    // $(window).keydown(function(e){
       
    //     console.log(e.key+"---"+e.keyCode);
    //     if(e.keyCode==39){
    //         x=x+10;
    //         $(".box").css("margin-left",x);
        
    //     }
    //     if(e.keyCode==38){
    //         y=y-10;
    //         $(".box").css("margin-top",y);
    //     }
    //     if(e.keyCode==37){
    //         x=x-10;
    //         $(".box").css("margin-left",x);
    //     }
    //     if(e.keyCode==40){
    //         y=y+10;
    //         $(".box").css("margin-top",y);
    //     }
    // })

})
</script>
</html>